/*
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2022-01-17 21:05:54
 * @LastEditors: GGB
 * @LastEditTime: 2022-02-01 18:00:24
 */
import { List, Input, message } from 'antd'
import {
    FileMarkdownTwoTone,
    // EditTwoTone,
    // DeleteTwoTone,
    // CloseCircleTwoTone
} from '@ant-design/icons';

import React, {
    useState, useEffect,
} from 'react'
import PropTypes from 'prop-types';
import useKeyPress from '../hooks/useKeyPress';
import useContextMenu from '../hooks/useContextMenu';
import { getParentNode } from '../utils/helper';




const FileList = ({
    files,
    onFileClick,
    onSaveEdit,
    onFileDelete
}) => {
    const { TextArea } = Input;
    const [editStatus, setEditStatus] = useState(false)
    const [value, setValue] = useState('')
    const enterPressed = useKeyPress(13)
    const escPressed = useKeyPress(27)
    const closeEdit = () => {
        setEditStatus(false);
        setValue('')
    }



    // hooks 右击菜单
    const clickedItem = useContextMenu([
        {
            label: '打开',
            click: () => {
                const parentElement = getParentNode(clickedItem.current, 'file-item')
                const id = parentElement.dataset.id
                id && onFileClick(parentElement.dataset.id)
            }
        },
        {
            label: '重命名',
            click: () => {
                const parentElement = getParentNode(clickedItem.current, 'file-item')
                const id = parentElement.dataset.id
                const title = parentElement.dataset.title
                id && setEditStatus(id)
                title && setValue(title)
            }
        },
        {
            label: '删除',
            click: () => {
                const parentElement = getParentNode(clickedItem.current, 'file-item')
                const id = parentElement.dataset.id
                id && onFileDelete(id)
                closeEdit()
            }
        }
    ], '.file-list', [files])


    useEffect(() => {
        const editItem = files.find(file => file.id === editStatus)
        // 判断文件名不能为空
        if (enterPressed && editStatus) {
            if (value.trim() === '')
                return message.warning('文件名不能为空')
            onSaveEdit(editItem.id, value, editItem.isNew)
            closeEdit()
        }
        if (escPressed && editStatus) {
            closeEdit()
            // TODO if we are editing a newly created file we should delete this file
            editItem.isNew && onFileDelete(editItem.id)
        }
    })
    // 新建文件的时候 处理相关内容
    useEffect(() => {
        const newFile = files.find(file => file.isNew)
        if (newFile) {
            setEditStatus(newFile.id)
            setValue(newFile.title)
        }
    }, [files])
    return (
        // TODO 对这块数据进行判断是否为空处理

               <List
                    itemLayout="horizontal"
                    dataSource={files}
                    bordered={false}
                    rowKey={item => item.id}
                    className='px-1 file-list'
                    renderItem={file => (
                        <List.Item

                        // actions={editStatus ?
                        //     [
                        //         <CloseCircleTwoTone onClick={() => closeEdit(file)} />
                        //     ]
                        //     :[]
                        //     [
                        //         <EditTwoTone key={file.id + 'edit'} onClick={() => {
                        //             setEditStatus(file.id); setValue(file.title)
                        //         }} />,
                        //         <DeleteTwoTone key={file.id + 'delete'} onClick={() => onFileDelete(file.id)} />
                        //     ]
                        // }
                        >
                            <List.Item.Meta
                                data-id={file.id}
                                data-title={file.title}
                                className="file-item"
                                avatar={<FileMarkdownTwoTone />}
                                title={
                                    <>
                                        {(editStatus !== file.id && !file.isNew) && <div className='one-line' onClick={() => onFileClick(file.id)}>{file.title}</div>}
                                        {/* 使用一个form包裹起来 */}
                                        {(editStatus === file.id || file.isNew) && <TextArea size="small" value={value} allowClear placeholder="请输入文件名称" onChange={e => { e.stopPropagation(); setValue(e.target.value) }} />}
                                    </>
                                }
                            />
                        </List.Item>
                    )}
                /> 
    )
}
FileList.propTypes = {
    files: PropTypes.array,
    onFileClick: PropTypes.func,
    onFileDelete: PropTypes.func,
    onSaveEdit: PropTypes.func
}

export default FileList